<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>YouTuTV</title>
	<meta name="lee" content="电影,电视剧,博客,论坛,编程开发,教育,资源分享,英语学习,英语语法,教学视频,高考,成人,职业教育">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
	<link rel="stylesheet" th:href="@{/css/mian.css}">
	<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
</head>
<body class="lay-blog">
		<div class="header">
			<div class="header-wrap">
				<h1 class="logo pull-left">
					<a href="/index">
						<span th:include="header"></span>
					</a>
				</h1>
				<div class="blog-nav pull-right">
					<div th:include="header-nav"></div>
					<a href="#" class="personal pull-left">
						<i class="layui-icon layui-icon-username"></i>
					</a>
				</div>
				<div class="mobile-nav pull-right" id="mobile-nav">
					<a href="javascript:;">
						<i class="layui-icon layui-icon-more"></i>
					</a>
				</div>
			</div>
			<ul class="pop-nav" id="pop-nav">
				<li><a href="/index">首页</a></li>
				<li><a href="/message">留言</a></li>
				<li><a href="/about">关于</a></li>
			</ul>
		</div>

		<div class="container-wrap">
			<div class="container container-message container-details" style="width: 80%;">
					<div class="contar-wrap">
						<!--文章详情-->
						<div class="item">
							<div class="item-box  layer-photos-demo1 layer-photos-demo">
								<h3 th:text="${article.getArticleName()}"></h3>
								<h5>发布于：<span th:text="${#dates.format(article.getCreateDate(), 'yyyy-MM-dd HH:mm:ss')}"></span></h5>
								<p th:utext="${article.getArticleContent()}"></p>
								<img th:src="@{/images/taijitu.jpg}" width="200" height="150" alt="">
								<div class="count layui-clear">
									<span class="pull-left">阅读 <em th:text="${article.getReadCount()}"></em></span>
									<span class="pull-right like"><i class="layui-icon layui-icon-praise"></i><em th:text="${article.getCommendCount()}"></em></span>
								</div>
							</div>
						</div>
						<a name="comment"> </a>
						<div class="comt layui-clear">
							<a href="javascript:;" class="pull-left">评论</a>
							<a th:href="@{'/comment/'+${article.getId()}}" class="pull-right">写评论</a>
						</div>
						<!--文章评论-->
						<div id="LAY-msg-box" th:each="o:${article.getArticleComment()}">
							<div class="info-item">
								<img class="info-img" th:src="@{/images/kongz.jpg}" width="75" height="75" alt="">
								<div class="info-text">
									<p class="title count">
										<span class="name" th:text="${o.getCommentUsername()}">一片空白</span>
										<span class="info-img like">
											<a th:href="@{'/articleCommentZan/'+${o.getId()}}">
                                                <i class="layui-icon layui-icon-praise"></i>点赞
                                                <span th:text="${o.getCommentZan()}"></span>
                                            </a>
										</span>
									</p>
									<p class="info-intr">
										<span th:text="${o.getCommentContent()}"></span>
									</p>
								</div>
							</div>
						</div>
					</div>
			</div>
		</div>
		<div class="footer">
			<div th:include="food"></div>
		</div>
	<script th:src="@{/layui/layui.js}">

	</script>
	<script>
		layui.config({
		  base: '../static/js/'
		}).use('blog');
		$.ajax({
			url:'comment',
			type:'post',
			data:this.cmccGroupAdvice,
			dataType: "json",
			success:function(data){
				if(data.data == 'ok'){
					alert('提交成功')
					document.querySelector("#myform").reset()
				}else{
					alert('系统繁忙,请稍后再试')
				}
			},
			// error:function(res){
			//     if(data.data == 'error'){
			//
			//     }
			// },
		});
	</script>
</body>
</html>